import cx from 'classnames';
import React from 'react';
import Base from '../Base';
import LocomotiveScroll from 'locomotive-scroll'; //https://github.com/locomotivemtl/locomotive-scroll
import styles from './index.less';

interface State {}
interface ViewProps extends React.HTMLAttributes<HTMLDivElement> {
  onScroll?: (obj: any) => void;
  initCallback?: (obj: any) => void;
}

export default class SmoothScroll extends Base<ViewProps, State> {
  private scroll: any;
  public didMount() {
    this.scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
      lerp: 0.05, //顺滑程度，默认0.1，越小越丝滑
      // getDirection	// false	// Add direction to scroll event.
      // getSpeed	    // false	// Add speed to scroll event.
      multiplier: 0.4, //滚动增量系数， 提高/降低滚动速度，默认1
    });
    this.scroll.stop();
    setTimeout(() => {
      this.scroll.update();
      // this.scroll.scrollTo('bottom')
      this.subscribeScroll();
      console.log('this.props.initCallback?', this.props.initCallback);
      if (this.props.initCallback) {
        this.props.initCallback(this.scroll);
      }
    }, 200);
  }
  public didHide() {}
  public willUnmount() {
    this.scroll.destroy();
  }
  public render() {
    const {
      className,
      children,
      initCallback,
      onScroll, //get rid of those
      ...restProps
    } = this.props;

    return (
      <div data-scroll-container className={className} {...restProps}>
        {children}
      </div>
    );
  }

  private subscribeScroll = () => {
    const { onScroll } = this.props;
    if (onScroll) {
      this.scroll.on('scroll', (args) => {
        onScroll(args);
        // console.log('args', args)
        // console.log(args.scroll.y)  //scrollY

        // Returns scroll instance (position, limit, speed, direction and current in-view elements).
        // Get all current elements : args.currentElements
        // if(typeof args.currentElements['hey'] === 'object') {
        //     let progress = args.currentElements['hey'].progress;
        //     console.log(progress);
        //     // ouput log example: 0.34
        //     // gsap example : myGsapAnimation.progress(progress);
        // }
      });
    }
  };
}
